﻿
/*超大屏PC平台*/
@media all and (min-width : 2448px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 2.25;
        /*最顶层组件的左边和右边大小*/
        --topLayoutPaddingHorizontal: calc(var(--topLayoutPaddingVertical) * 2.5);
        /*更宽的弹窗宽度*/
        --popUpWidthMedium: 60dvw;
        /*更窄的弹窗宽度*/
        --popUpWidthSmall: min(var(--popUpWidthMedium),60ic);
        /*更高的弹窗高度*/
        --popUpHeightMedium: 60dvh;
        /*更矮的弹窗高度*/
        --popUpHeightSmall: 40dvh;
    }

    /*依次排列元素的变量定义样式*/
    .arrangeDefinition
    {
        /*列表容器的较少数量*/
        --arrangeParticleMinority: 4;
        /*列表容器的中等数量*/
        --arrangeParticleMedium: 5;
        /*列表容器的较多数量*/
        --arrangeParticleMost: 6;
        /*列表容器的特别多数量*/
        --arrangeParticleEspeciallyMany: 9;
        /*列表容器元素的建议高度*/
        --arrangeElementSuggestedHeight: 14ic;
    }

    /*弹窗宽度样式*/
    .popUpWidth
    {
        min-width: calc(var(--popUpWidthMedium) / 2.5);
        max-width: var(--popUpWidthMedium);
    }
}

/*普通屏PC平台*/
@media all and (min-width : 1224px) and (max-width : 2448px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 1.75;
        /*最顶层组件的左边和右边大小*/
        --topLayoutPaddingHorizontal: calc(var(--topLayoutPaddingVertical) * 2);
        /*更宽的弹窗宽度*/
        --popUpWidthMedium: 70dvw;
        /*更窄的弹窗宽度*/
        --popUpWidthSmall: min(var(--popUpWidthMedium),50ic);
        /*更高的弹窗高度*/
        --popUpHeightMedium: 70dvh;
        /*更矮的弹窗高度*/
        --popUpHeightSmall: 50dvh;
    }

    /*依次排列元素的变量定义样式*/
    .arrangeDefinition
    {
        /*列表容器的较少数量*/
        --arrangeParticleMinority: 3;
        /*列表容器的中等数量*/
        --arrangeParticleMedium: 3;
        /*列表容器的较多数量*/
        --arrangeParticleMost: 4;
        /*列表容器的特别多数量*/
        --arrangeParticleEspeciallyMany: 6;
        /*列表容器元素的建议高度*/
        --arrangeElementSuggestedHeight: 12ic;
    }

    /*弹窗宽度样式*/
    .popUpWidth
    {
        min-width: calc(var(--popUpWidthMedium) / 2);
        max-width: var(--popUpWidthMedium);
    }
}

/*平板平台*/
@media all and (min-width : 667px) and (max-width : 1224px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 1.25;
        /*最顶层组件的左边和右边大小*/
        --topLayoutPaddingHorizontal: calc(var(--topLayoutPaddingVertical) * 1.5);
        /*更宽的弹窗宽度*/
        --popUpWidthMedium: 80dvw;
        /*更窄的弹窗宽度*/
        --popUpWidthSmall: min(var(--popUpWidthMedium),40ic);
        /*更高的弹窗高度*/
        --popUpHeightMedium: 80dvh;
        /*更矮的弹窗高度*/
        --popUpHeightSmall: 60dvh;
    }

    /*依次排列元素的变量定义样式*/
    .arrangeDefinition
    {
        /*列表容器的较少数量*/
        --arrangeParticleMinority: 2;
        /*列表容器的中等数量*/
        --arrangeParticleMedium: 2;
        /*列表容器的较多数量*/
        --arrangeParticleMost: 3;
        /*列表容器的特别多数量*/
        --arrangeParticleEspeciallyMany: 4;
        /*列表容器元素的建议高度*/
        --arrangeElementSuggestedHeight: 10ic;
    }

    /*弹窗宽度样式*/
    .popUpWidth
    {
        min-width: calc(var(--popUpWidthMedium) / 1.5);
        max-width: var(--popUpWidthMedium);
    }
}

/*手机平台*/
@media all and (max-width : 667px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 1;
        /*最顶层组件的左边和右边大小*/
        --topLayoutPaddingHorizontal: var(--topLayoutPaddingVertical);
        /*更宽的弹窗宽度*/
        --popUpWidthMedium: 90dvw;
        /*更窄的弹窗宽度*/
        --popUpWidthSmall: var(--popUpWidthMedium);
        /*更高的弹窗高度*/
        --popUpHeightMedium: 80dvh;
        /*更矮的弹窗高度*/
        --popUpHeightSmall: 60dvh;
    }

    /*依次排列元素的变量定义样式*/
    .arrangeDefinition
    {
        /*列表容器的较少数量*/
        --arrangeParticleMinority: 1;
        /*列表容器的中等数量*/
        --arrangeParticleMedium: 1;
        /*列表容器的较多数量*/
        --arrangeParticleMost: 2;
        /*列表容器的特别多数量*/
        --arrangeParticleEspeciallyMany: 2;
        /*列表容器元素的建议高度*/
        --arrangeElementSuggestedHeight: 8ic;
    }

    /*弹窗宽度样式*/
    .popUpWidth
    {
        width: var(--popUpWidthMedium);
    }
}

/*横向屏幕，即宽大于高，一般用于电脑*/
@media (orientation: landscape)
{
    /*占满屏幕，并且在横屏时自动旋转*/
    .horizontalScreen
    {
        min-width: 100dvw;
        min-height: 100dvh;
    }

    :root
    {
        /*横纵比*/
        --aspectRatio: 16 / 9;
    }
}

/*竖向屏幕，即高大于宽，一般用于手机*/
@media (orientation: portrait)
{
    /*占满屏幕，并且在横屏时自动旋转*/
    .horizontalScreen
    {
        min-width: 100dvh;
        min-height: 100dvw;
        transform-origin: left top;
        transform: translateX(100dvw) rotate(90deg);
    }

    :root
    {
        /*横纵比*/
        --aspectRatio: 9 / 16;
    }
}

/*打印时的样式*/
@media print
{
    /*打印时隐藏的样式*/
    .hideDuringPrint
    {
        display: none !important;
    }
}

/*全局样式*/
:root
{
    /*全局中等gap属性*/
    --gapMedium: calc(1ch * var(--lengthReference));
    /*全局极端紧凑gap属性*/
    --gapExtremeSmall: calc(var(--gapMedium) * 0.25);
    /*全局紧凑gap属性*/
    --gapSmall: calc(var(--gapMedium) * 0.5);
    /*全局宽松gap属性*/
    --gapBig: calc(var(--gapMedium) * 2);
    /*全局中等padding属性*/
    --paddingMedium: calc(1ch * var(--lengthReference));
    /*全局极端紧凑padding属性*/
    --paddingExtremeSmall: calc(var(--paddingMedium) * 0.25);
    /*全局紧凑padding属性*/
    --paddingSmall: calc(var(--paddingMedium) * 0.5);
    /*全局宽松padding属性*/
    --paddingBig: calc(var(--paddingMedium) * 2);
    /*中等圆角样式*/
    --radiusMedium: 20px;
    /*紧凑圆角样式*/
    --radiusSmall: calc(var(--radiusMedium) * 0.5);
    /*极端圆角样式*/
    --radiusExtremeSmall: calc(var(--radiusMedium) * 0.25);
    /*最顶层组件的上边和下边大小*/
    --topLayoutPaddingVertical: 5dvmin;
    /*强调的颜色*/
    --emphasizeColor: red;
    /*遮罩的颜色*/
    --backdropColor: rgb(0 0 0 / 45%);
    /*默认的均分容器子元素宽度*/
    --sharingContainerElementWidth: calc(6ic + 2ch);
    /*屏蔽深色模式，因为作者认为这个需要由开发者自己适配，否则会产生很多意想不到的结果*/
    color-scheme: only light;
}

/*屏蔽深色模式，只有在国产浏览器强制使用深色模式的时候，才适合使用它*/
@media (prefers-color-scheme: dark)
{
    :root
    {
        background-color: white !important;
        color: black !important;
    }
}

/*主体样式*/
body
{
    margin: 0;
}

/*pre元素样式*/
pre
{
    max-width: 100%;
    word-break: break-all;
    white-space: normal;
}

/*模态对话框样式*/
dialog
{
    background: unset;
    border: unset;
    padding: unset;
}

/*文件上传器样式*/
input[type=file]
{
    display: none;
}

/*完美容器样式，它的子元素依次排列，允许换行，会平分所有剩余空间，但最后一行除外*/
.perfectContainer
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gapMedium);
}

    /*完美容器的子元素样式*/
    .perfectContainer > *
    {
        flex-grow: 1;
    }

    /*完美容器的子元素的附加伪元素样式*/
    .perfectContainer::after
    {
        content: '';
        flex-grow: 99;
    }

/*均分容器样式，它指定子元素的宽度，然后自动排列元素*/
.sharingContainer
{
    display: grid;
    grid-template: 1fr / repeat(auto-fill,minmax(var(--sharingContainerElementWidth),1fr));
    gap: var(--gapMedium);
}

/*占满屏幕，并且在横屏时自动旋转*/
.horizontalScreen
{
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
}

/*普通容器样式*/
.commonContainers
{
    display: flex;
    flex-direction: column;
    gap: var(--gapMedium);
}

/*平等容器样式，它的每个子元素平分所有空间*/
.equalContainers
{
    display: flex;
}

    /*平等容器的子元素样式*/
    .equalContainers > *
    {
        flex-grow: 1;
    }

/*占满屏幕布局*/
.occupyScre
{
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100dvw;
    min-height: 100dvh;
    box-sizing: border-box;
}

/*最顶层组件的布局样式*/
.topLayout
{
    padding: var(--topLayoutPaddingVertical) var(--topLayoutPaddingHorizontal);
}

/*粘性定位样式*/
.sticky
{
    position: sticky;
    z-index: 1;
}

/*粘在顶部的粘性定位样式*/
.stickyTop
{
    top: 0px;
}

/*粘在底部的粘性定位样式*/
.stickyBottom
{
    bottom: 0px;
}

/*豆腐块组件容器的CSS样式*/
.tofuCubesContainer
{
    display: flex;
    flex-direction: column;
    row-gap: var(--paddingSmall);
    width: var(--sharingContainerElementWidth);
}

/*豆腐块组件图标的CSS样式*/
.tofuCubesIcon
{
    width: var(--sharingContainerElementWidth);
}

/*豆腐块组件文本的CSS样式*/
.tofuCubesText
{
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: var(--sharingContainerElementWidth);
}

/*表示一个换行样式*/
.wrap
{
    white-space: pre-wrap;
}

/*省略文本样式*/
.omitText
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*占满屏幕的容器，它可以用于帮助实现天地布局*/
.fullScreenContainer:has(.fullScreenContainerSon)
{
    height: 100dvh;
    overflow: auto;
    overscroll-behavior: none;
}

/*通用居中模式*/
.centerCommon
{
    display: flex;
    place-content: center;
    align-items: center;
}

/*相对于父元素的中部居中布局，水平垂直方向皆居中，它还会填满父元素*/
.centerMiddRelativelyFill
{
    min-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

/*相对于父元素的中部居中布局，水平垂直方向皆居中*/
.centerMiddRelatively
{
    box-sizing: border-box;
}

/*相对于屏幕的中部居中布局，水平垂直方向皆居中*/
.centerMiddAbsolute
{
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100dvw;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    place-content: center;
    align-items: center;
}

/*为弹窗优化的相对于屏幕的中部居中布局*/
dialog .centerMiddAbsolute
{
    position: unset;
    min-width: unset;
    min-height: unset;
}

/*表示一个紧凑居中布局，它一般用来排列按钮*/
.compactCentered
{
    display: flex;
    flex-wrap: wrap;
    place-content: space-evenly;
    gap: var(--gapBig);
}

/*全屏蒙版容器样式*/
.maskingContainerFullScreen
{
    position: fixed;
    z-index: -9999;
}

/*亚克力容器样式*/
.acrylicContainer
{
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%
}

/*亚克力蒙版样式*/
.acrylicMask
{
    background: rgba(251, 251, 253, 0.4);
    backdrop-filter: saturate(1.8) blur(15px);
    width: 100%;
    height: 100%
}

/*IOS蒙版容器样式*/
.iosContainer
{
    background-position: center;
    background-size: cover;
    background-color: transparent;
    width: 100%;
    height: 100%;
}

/*IOS蒙版浅色样式*/
.iosContainerUndertint
{
    background-color: rgba(250, 250, 252, 0.8);
    backdrop-filter: saturate(1.8) blur(20px);
}

/*IOS蒙版深色样式*/
.iosContainerDarkness
{
    background: rgba(4, 4, 2, 0.8);
    backdrop-filter: saturate(1.8) blur(20px);
}

/*被选中的元素的样式*/
.selectElement
{
    background-color: gray;
    color: white;
}

/*选择器元素容器样式*/
.selectorElementContainer
{
    display: flex;
    place-content: center;
    align-items: center;
}

/*禁止鼠标点击样式*/
.prohibitClicking
{
    pointer-events: none;
}

/*隐藏的样式*/
.hidden
{
    display: none;
}

/*依次排列元素，且元素数量较少时的样式*/
.arrangeMinority
{
    /*每一行排列元素的数量*/
    --arrangeColumnsCount: var(--arrangeParticleMinority);
}

/*依次排列元素，且元素数量中等时的样式*/
.arrangeMedium
{
    /*每一行排列元素的数量*/
    --arrangeColumnsCount: var(--arrangeParticleMedium);
}

/*依次排列元素，且元素数量较多时的样式*/
.arrangeMost
{
    /*每一行排列元素的数量*/
    --arrangeColumnsCount: var(--arrangeParticleMost);
}

/*依次排列元素，且元素数量特别多时的样式*/
.arrangeEspeciallyMany
{
    /*每一行排列元素的数量*/
    --arrangeColumnsCount: var(--arrangeParticleEspeciallyMany);
}

/*依次排列元素样式*/
.arrange
{
    display: grid;
    gap: var(--gapMedium);
    grid-template-columns: repeat(var(--arrangeColumnsCount),1fr)
}

/*依次排列元素，并填满所有剩余空间样式*/
.arrangeFill
{
    display: flex;
    flex-wrap: wrap;
}

    /*依次排列元素，并填满所有剩余空间的子元素样式*/
    .arrangeFill > *
    {
        flex-grow: 1;
        flex-basis: calc(100% / var(--arrangeColumnsCount));
        padding: var(--paddingSmall);
    }

/*横宽竖高型固定弹窗样式*/
.fixedModalGiant
{
    width: var(--popUpWidthMedium);
    height: var(--popUpHeightMedium);
    overflow: auto;
}

/*横窄竖高型固定弹窗样式*/
.fixedModalLanky
{
    width: var(--popUpWidthSmall);
    height: var(--popUpHeightMedium);
    overflow: auto;
}

/*圆形圆角样式*/
.circleRadius
{
    border-radius: 50%;
    text-align: center;
}

/*强调文本的样式*/
.emphasizeText
{
    color: var(--emphasizeColor);
}

/*背景遮罩样式*/
dialog::backdrop
{
    background: var(--backdropColor);
}
